<template>
	<view class="chatBox">
		<view class="header">
			<view class="tag" @click="goBack"><</view>
			<view class="title">{{realname}}</view>
		</view>
		<view class="BG"></view>
		<view class="contain1">
			<ChatBox v-for="(item,index) in chatItem" :key="index"
			:realname=item.realname
			:text=item.message
			:type=item.type||type
			:username="item.username"
			:id="item.UserId"
			:avatar="item.avatar"></ChatBox>
		</view>
		<view class="inputBox">
			<input type="text" v-model="content">
			<button type="primary" size="mini" @click="sendMessage1">发送</button>
		</view>
	</view>
</template>

<script>
	import ChatBox from "./chatBox.vue"
	import glob from "../../glob.js"
	export default{
		components:{
			ChatBox
		},
		data(){
			return {
						chatItem:glob.ChatItem,
						username:"",
						realname:"",
						type:'chat',
						content:"",
						newUsernameOfRoot:""
			}
		},
		onLoad(res) {
			this.username = res.username
			this.newUsernameOfRoot = res.username
			this.realname = res.realname
		},
		mounted() {
			this.getStartChat()
			this.user = uni.getStorageSync("usernameInfo")?uni.getStorageSync("usernameInfo"):{}
		},
		computed:{
			usernames(){
				return this.newUsernameOfRoot == ""
				        ? this.user.username
				        : this.newUsernameOfRoot;
			},
			toUser() {
			      return this.user.status === "876ea4f21078c7d38e3b0bdc74a"
			        ? this.newUsernameOfRoot
			        : "2628735401";
			    }
		},
		methods:{
			sendMessage1(){
				console.log("zcasd")
				uni.request({
					url:"https://www.ttzxh.icu:443/api/chat/add",
					header:{
						Authorization: uni.getStorageSync('LoginToken')
					},
					data:{
						username:this.user.username,
						content:this.content,
						to:this.toUser
					},
					method:"get",
					success:(res)=>{
						console.log(res)
						if (res.data.error === -1) {
						  this.socket.emit("message", {
						    msg: this.content,
						    username: this.usernames,
						    realname: this.realname,
						    avatar: this.user.avatar,
						    id: this.user.id,
						  });
						  this.content = "";
					}
				},
				fail: (res) => {
					//失败回调
					console.log(res)
				}
				})
			},
			getStartChat(){
				uni.$on("sendStartChat",msg=>{
					this.chatItem = msg
					setTimeout(()=>{
						const query = uni.createSelectorQuery().in(this).select(".contain1");
						query.fields({
						  scrollOffset: true,
							size: true
						}, data => {
							uni.pageScrollTo({
								scrollTop:data.height,
								duration:300
							})
						}).exec();
					},10)
				})
			},
			goBack(){
				console.log("casdasd")
				this.leaveRoom()
				uni.reLaunch({
					url:"/pages/chat/chat"
				})
			},
			//离开房间
			leaveRoom(){
				this.socket.emit("leave",{
					username:this.usernames,
					realname:this.user.realname
				})
			},
			//发送消息
			sendMessage(msg){
				this.socket.emit("message",{
					"message":msg,
					"username":this.user.username,
					"realname":this.user.realname,
					"roomId":this.user.username,
					"avatar":this.user.avatar,
					"UserId":this.user.id
				})
			},
			
		},
		beforeDestroy(){
			uni.$off("sendStartChat")
		}
	}
</script>

<style lang="scss" scoped>
	.chatBox{
		.header{
			padding-top: 15px;
			display: flex;
			position: fixed;
			justify-content: center;
			align-items: center;
			top: 0;
			z-index: 9;
			width: 100%;
			height: 50px;
			box-shadow: 0 0 5px 1px #808080;
			.title{
				font-size: 28px;
			}
			.tag{
				margin-left: 20px;
				position: absolute;
				left: 0;
				transition: all .2s;
				&:active{
					color: #999999;
				}
			}
		}
		.BG{
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-image: url(../../static/img/bingqishi.jpg);
			background-size: cover;
			opacity: 0.5;
			z-index: -1;
		}
		.contain1{
			padding-top: 75px;
			padding-bottom: 60px;
		}
		.inputBox{
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: fixed;
			bottom: 0;
			z-index: 9;
			width: 100%;
			height: 50px;
			input{
				margin-left: 10px;
				padding: 5px 17px;
				border-radius: 40px;
				width: 500upx;
				height: 30px;
				background-color: #fff;
			}
			button{
				height: 40px;
				border-radius: 40px;
				line-height: 40px;
				font-size: 15px;
			}
		}
	}
</style>
